<template>
    <div class="fullScreen bg-c-wh">
        <!-- header -->
        <m-header :msg="'历史走势'"></m-header>
        <!-- tab -->
        <tab-temp :tabArr="['号码', '总和', '特码']"></tab-temp>
        <!-- 号码 -->
        <div class="tx-c marg-05 tx-c tx-s-12 line-h2" v-show="$store.state.tabTogIndex == 0">
            <div class="flex-box bg-c-g bor-t bor-b">
                <div class="wd-22 bor-l bor-r">期数</div>
                <div class="wd-11 bor-r" v-for="(item, key) in haoma" :key="key">{{ item }}</div>
            </div>
            <div class="scroll-box bor-l">
                <div class="bor-rb">
                    <div class="flex-box bor-b" v-for="item1 in list0" :key="item1.issue">
                        <div class="wd-22 bor-r">{{ item1.issue }}期</div>
                        <div class="flex-bap wd-11 bor-r" v-for="(item2, key2) in item1.haoma" :key="key2">
                            <div class="circle-n" :class="[ colorCir[item2.color] ]">{{ item2.number }}</div>
                            <div class="tx-c-666">{{ item2.sign }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 总和 -->
        <div class="tx-c marg-05 tx-c line-h2" v-show="$store.state.tabTogIndex == 1">
            <div class="flex-box bg-c-g tx-s-14 bor-t bor-b">
                <div class="wd-34 bor-l bor-r">期数</div>
                <div class="wd-22 bor-r">总数</div>
                <div class="wd-22 bor-r">单双</div>
                <div class="wd-22 bor-r">大小</div>
            </div>
            <div class="scroll-box tx-s-12 tx-c-666 bor-l">
                <div class="bor-rb">
                    <div class="flex-box bor-b" v-for="item in list1" :key="item.issue">
                        <div class="wd-34 bor-r">{{ item.issue }}期</div>
                        <div class="wd-22 bor-r">{{ item.zs }}</div>
                        <div class="wd-22 bor-r">{{ item.dx }}</div>
                        <div class="wd-22 bor-r">{{ item.ds }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 特码 -->
        <div class="tx-c marg-05 tx-c line-h2" v-show="$store.state.tabTogIndex == 2">
            <div class="flex-box bg-c-g tx-s-14 bor-t bor-b">
                <div class="wd-22 bor-l bor-r">期数</div>
                <div class="wd-13 bor-r" v-for="(item, i) in tema" :key="i">{{ item }}</div>
            </div>
            <div class="scroll-box tx-s-12 tx-c-666 bor-l">
                <div class="bor-rb">
                    <div class="flex-box bor-b" v-for="item in list2" :key="item.issue">
                        <div class="wd-22 bor-r">{{ item.issue }}期</div>
                        <div class="wd-13 bor-r">{{ item.ds }}</div>
                        <div class="wd-13 bor-r">{{ item.dx }}</div>
                        <div class="wd-13 bor-r">{{ item.hds }}</div>
                        <div class="wd-13 bor-r">{{ item.hdx }}</div>
                        <div class="wd-13 bor-r">{{ item.dxw }}</div>
                        <div class="wd-13 bor-r">{{ item.sb }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/user.css'
import MHeader from '../../../components/m-header'
import tabTemp from '../../../components/tabTemp'
import { trendNum, trendSum, trendTm } from '../../../common/js/axiosUtil'
export default {
    data () {
        return {
            list0 : [],
            list1 : [],
            list2 : [],
            haoma : ['正一', '正二', '正三', '正四', '正五', '正六', '特码'],
            tema : ['单双', '大小', '和单双', '和大小', '尾大小', '波色'],
            colorCir : {
                R : 'circle-R', B : 'circle-B', G : 'circle-G'
            }
        }
    },
    created () {
        this.getNum()
        this.getSum()
        this.getTm()
    },
    methods : {
        // 获取号码走势
        getNum () {
            this.$toast('加载中...', 1000000) 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('type', this.$store.state.lotType) 
            trendNum(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){ 
                    this.list0 = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 获取总和走势
        getSum () {
            this.$toast('加载中...', 1000000) 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('type', this.$store.state.lotType) 
            trendSum(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){ 
                    this.list1 = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // 获取特码走势
        getTm () {
            this.$toast('加载中...', 1000000) 
            let params = new URLSearchParams()
            const token = this.$token()
            params.append('timeStamp', token[0])
            params.append('token', token[1])
            params.append('type', this.$store.state.lotType) 
            trendTm(params)
            .then((response)=> {
                this.$toastClose()
                if(response.data.code == "200"){ 
                    this.list2 = response.data.data
                } else {
                    this.$logAgain(response.data.msg)
                } 
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        }
    },
    components: {
        MHeader,
        tabTemp
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .scroll-box
        position : fixed 
        top : 8rem
        bottom : 0
        left : .5rem
        right : .5rem
        overflow: auto
    .scroll-box::-webkit-scrollbar
        display : none 
    .line-h2
        line-height : 2rem
    .wd-22
        width : 22%
    .wd-11
        width : 11%
    .wd-34
        width : 34%
    .wd-13
        width : 13%
    .bor-l
        border-left : 1px solid #ccc
    .bor-r
        border-right : 1px solid #ccc
    .bor-t
        border-top : 1px solid #ccc
    .bor-b
        border-bottom : 1px solid #ccc
    .circle-n
        height: 1.125rem
        width: 1.125rem
        line-height: 1.125rem
        border-radius: 100% 100%
        color : white
</style>